<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>滴滴开源：DoraemonKit来了，程序员的开发工具箱 | 惊蛰的博客</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
    <script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.11.2/js/v4-shims.js"></script>
    <!--    #代码高亮引入必要库-->
    <link href="https://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <!--    动画库-->
    <link rel="stylesheet" href="https://www.kettle.net.cn/animate/animate.min.css">
    <!--    评论-->
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <!--    aplayer-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
    <!--    jq-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--    backstretch 轮播图-->
    <script type="text/javascript" src="//cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <!-- 引用 bbtalk -->
    <script src="https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js"></script>
    
    <meta name="description" content="惊蛰的博客">
    
    <link rel="preload" href="/assets/css/0.styles.c076dd71.css" as="style"><link rel="preload" href="/assets/js/app.8e64649f.js" as="script"><link rel="preload" href="/assets/js/17.9b1a1e45.js" as="script"><link rel="preload" href="/assets/js/4.84c4889c.js" as="script"><link rel="preload" href="/assets/js/35.88a27070.js" as="script"><link rel="prefetch" href="/assets/js/1.19f63e1b.js"><link rel="prefetch" href="/assets/js/10.76457569.js"><link rel="prefetch" href="/assets/js/11.2fabe50b.js"><link rel="prefetch" href="/assets/js/12.29f3cbb3.js"><link rel="prefetch" href="/assets/js/13.5bbd6907.js"><link rel="prefetch" href="/assets/js/14.97c38b2b.js"><link rel="prefetch" href="/assets/js/15.a6ea704f.js"><link rel="prefetch" href="/assets/js/16.bf8c8fc8.js"><link rel="prefetch" href="/assets/js/18.bcc6785d.js"><link rel="prefetch" href="/assets/js/19.af8c6c71.js"><link rel="prefetch" href="/assets/js/2.63f6fb06.js"><link rel="prefetch" href="/assets/js/20.04b27695.js"><link rel="prefetch" href="/assets/js/21.0ecdd73f.js"><link rel="prefetch" href="/assets/js/22.5a2b263f.js"><link rel="prefetch" href="/assets/js/23.a9412068.js"><link rel="prefetch" href="/assets/js/24.aedb6bde.js"><link rel="prefetch" href="/assets/js/25.dfc2456b.js"><link rel="prefetch" href="/assets/js/26.e8e572f6.js"><link rel="prefetch" href="/assets/js/27.0fd0718f.js"><link rel="prefetch" href="/assets/js/28.60ae6b13.js"><link rel="prefetch" href="/assets/js/29.701ebcc0.js"><link rel="prefetch" href="/assets/js/3.315403c1.js"><link rel="prefetch" href="/assets/js/30.9b75bf1e.js"><link rel="prefetch" href="/assets/js/31.67f8b095.js"><link rel="prefetch" href="/assets/js/32.b87582bb.js"><link rel="prefetch" href="/assets/js/33.7c0ab263.js"><link rel="prefetch" href="/assets/js/34.d4c2e482.js"><link rel="prefetch" href="/assets/js/36.ccd7bbb9.js"><link rel="prefetch" href="/assets/js/37.a4ec9e64.js"><link rel="prefetch" href="/assets/js/38.888b51fa.js"><link rel="prefetch" href="/assets/js/39.822d40c5.js"><link rel="prefetch" href="/assets/js/40.76c692f0.js"><link rel="prefetch" href="/assets/js/5.94499d86.js"><link rel="prefetch" href="/assets/js/6.5934ba2a.js"><link rel="prefetch" href="/assets/js/8.b3a395d6.js"><link rel="prefetch" href="/assets/js/9.81a3105a.js">
    <link rel="stylesheet" href="/assets/css/0.styles.c076dd71.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div><div data-v-43936cb4><div class="container" data-v-43936cb4 data-v-43936cb4><div class="ordinary" data-v-43936cb4><div data-v-43936cb4><a target="_self" href="/" class="title flat-box waves-effect waves-block author" data-v-43936cb4>
                        jingzhe
                    </a></div> <div class="menu navigation" data-v-43936cb4><ul class="nav-list-h m-pc" data-v-43936cb4><li data-v-43936cb4><a href="/" id="home" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-home fa-fw" data-v-43936cb4></i>博客
                            </a></li> <li data-v-43936cb4><a href="/archives/" id="archives" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-archive fa-fw" data-v-43936cb4></i>归档
                            </a></li> <li data-v-43936cb4><a href="/friends/" id="friends" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-link fa-fw" data-v-43936cb4></i>友链
                            </a></li> <li data-v-43936cb4><a href="/aboutPage/" id="about" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-info-circle fa-fw" data-v-43936cb4></i>关于
                            </a></li> <li data-v-43936cb4><a id="other" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-info-circle fa-fw" data-v-43936cb4></i>其他
                            </a> <ul class="list-v" data-v-43936cb4><li data-v-43936cb4><a class="menuitem flat-box header toggle-mode-btn cutover" data-v-43936cb4><i class="fas fa-moon fa-fw" data-v-43936cb4></i> 暗黑模式
                                    </a></li> <li data-v-43936cb4><hr data-v-43936cb4></li> <li data-v-43936cb4><a href="/bb/" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4>
                                        哔哔哔
                                    </a></li> <li data-v-43936cb4><a target="_blank" href="https://blog.jingzhe.xyz" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4>
                                        旧版博客
                                    </a></li> <hr data-v-43936cb4> <li data-v-43936cb4><a href="/categories/" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4><i class="fa fa-folder-open fa-fw" data-v-43936cb4></i>
                                        分类
                                    </a></li> <li data-v-43936cb4><a href="/tags/" id="v2getting-started" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4><i class="fa fa-tags fa-fw" data-v-43936cb4></i> 标签
                                    </a></li></ul></li></ul></div> <div class="m_search" data-v-43936cb4><form name="searchform" class="form u-search-form" data-v-43936cb4><i class="icon fa fa-search fa-fw" data-v-43936cb4></i> <input type="text" placeholder="Search..." class="input u-search-input" data-v-43936cb4></form></div></div> <div class="paper" data-v-43936cb4></div></div></div> <div id="archives-pjax" class="paper" data-v-bb8ac3a0><div class="homeCover" data-v-bb8ac3a0></div> <div class="row" data-v-bb8ac3a0><div class="col-span-24" data-v-bb8ac3a0><div id="anchorPoint" data-v-bb8ac3a0></div></div> <div id="main-body-pjax" class="main-body" data-v-bb8ac3a0><div class="paper-page" data-v-bb8ac3a0><div show="true" class="homepage" data-v-9fc62fe0 data-v-bb8ac3a0><div class="post-list" data-v-9fc62fe0 data-v-9fc62fe0><div class="post-wrapper" data-v-9fc62fe0><div class="headimg-div" data-v-9fc62fe0><!----></div> <div class="meta" data-v-9fc62fe0><h2 data-v-9fc62fe0>滴滴开源：DoraemonKit来了，程序员的开发工具箱</h2> <div data-v-9fc62fe0><div class="author" data-v-9fc62fe0><a href="https://blog.jingzhe.xyz" rel="nofollow" class="author-div" data-v-9fc62fe0><img src="https://blog.jingzhe.xyz/jingzhe/jpg/1593256062295.jpeg" data-v-9fc62fe0> <a data-v-9fc62fe0>Jingzhe</a></a></div> <div class="time" data-v-9fc62fe0><div data-v-9fc62fe0><i aria-hidden="true" class="fa fa-calendar-alt fa-fw" data-v-9fc62fe0></i> <span data-v-9fc62fe0>2020-08-08T22:35:59.000Z</span></div></div> <div class="guest" data-v-9fc62fe0><i class="fa fa-comment-dots fa-fw" data-v-9fc62fe0></i> <span data-v-9fc62fe0>9</span></div></div></div> <div class="article" data-v-9fc62fe0><div class="leancloud_visitors" data-v-9fc62fe0><div class="content__default" data-v-9fc62fe0><h2 id="doraemonkit-dɔ-ra-emɔn-简称dokit-中文名-哆啦a梦-意味着能够像哆啦a梦一样提供给他的主人各种各样的工具。just-do-kit。"><a href="#doraemonkit-dɔ-ra-emɔn-简称dokit-中文名-哆啦a梦-意味着能够像哆啦a梦一样提供给他的主人各种各样的工具。just-do-kit。" class="header-anchor">#</a> DoraemonKit /'dɔ:ra:'emɔn/，简称DoKit，中文名 哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just Do Kit。</h2> <p><img src="http://p6-tt.byteimg.com/large/pgc-image/043742a5903a42779c538786e351b515?from=pc" alt="043742a5903a42779c538786e351b515.jpg"></p> <h2 id="doraemonkit是什么"><a href="#doraemonkit是什么" class="header-anchor">#</a> DoraemonKit是什么？</h2> <p>DoraemonKit 是一个功能平台，工具集合，和名字一样，哆啦A梦，能够让每一个 App 快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具，而且能够完美在 Doraemon 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具，并搭配我们的dokit平台，让功能得到延伸，接入方便，便于扩展。</p> <h2 id="doraemonkit有什么特色"><a href="#doraemonkit有什么特色" class="header-anchor">#</a> DoraemonKit有什么特色？</h2> <p>1、DoraemonKit 能够快速让你的业务测试代码能够在这里统一管理，统一收口；</p> <p>2、DoraemonKit 内置很多常用的工具，避免重复实现，一次接入，你将会拥有强大的工具集合；</p> <p>3、搭配dokit平台，方便你进行数据mock以及记录你的每一次健康体检用例。</p> <p>先上一张图，看看它有啥：
<img src="http://p6-tt.byteimg.com/large/pgc-image/0cfbd4c5964445cb9883005b98acee8d?from=pc" alt="0cfbd4c5964445cb9883005b98acee8d.jpg"></p> <h2 id="你可用的模块有哪些"><a href="#你可用的模块有哪些" class="header-anchor">#</a> 你可用的模块有哪些？</h2> <h3 id="一、平台工具-www-dokit-cn"><a href="#一、平台工具-www-dokit-cn" class="header-anchor">#</a> 一、平台工具(www.dokit.cn)</h3> <p>【数据Mock】 App接口Mock解决方案，提供一套基于App网络拦截的接口Mock方案，无需修改代码即可完成对于接口数据的Mock。</p> <p>【健康体检】 一键式操作，整合DoKit多项工具，数据可视化，快速准确定位问题，让你对app的性能了如指掌。</p> <h3 id="二、常用工具"><a href="#二、常用工具" class="header-anchor">#</a> 二、常用工具</h3> <p>【App 信息查看】 快速查看手机信息，App 基础信息、签名相关、权限信息的渠道，避免去手机设置查找或者查看项目源代码的麻烦；</p> <p>【开发者选项 Android特有】 一键跳转开发者选项，避免安卓由于平台差异导致的入口不一致</p> <p>【本地语言】 一键跳转本地语言，避免安卓由于平台差异导致的入口不一致</p> <p>【沙盒浏览】 App 内部文件浏览的功能，支持删除和预览, 并且能通过 AirDrop 或者其他分享方式上传到 PC 中，进行更加细致的操作；</p> <p>【MockGPS】 App 能定位到全国各地，支持地图地位和手动输入经纬度；</p> <p>【H5任意门】 开发测试同学可以快速输入 H5 页面地址，查看该页面效果；</p> <p>【Crash查看】 方便本地打印出出现 Crash 的堆栈；</p> <p>【子线程UI】 快速定位哪一些 UI 操作在非主线程中进行渲染，避免不必要的问题；（iOS独有）</p> <p>【清除本地数据】 一键删除沙盒中所有数据；</p> <p>【NSLog】 把所有 NSLog 信息打印到UI界面，避免没有开发证书无法调试的尴尬；</p> <p>【Lumberjack】 每一条 CocoaLumberjack 的日志信息，都在在 App 的界面中显示出来，再也不需要导出日志这么麻烦;（iOS独有）</p> <p>【DBView】 通过网页方便快捷的操作应用内数据库，让数据库的调试变得非常优雅;</p> <p>【模拟弱网】 限制网速，模拟弱网环境下App的运行情况。（android独有）</p> <h3 id="三、性能检测"><a href="#三、性能检测" class="header-anchor">#</a> 三、性能检测</h3> <p>【帧率】 App 帧率信息提供波形图查看功能，让帧率监控的趋势更加明显；</p> <p>【CPU】 App CPU 使用率信息提供波形图查看功能，让 CPU 监控的趋势更加形象；</p> <p>【内存】 App 内存使用量信息提供波形图查看功能，让内存监控的趋势更加鲜明；</p> <p>【流量监控】 拦截 App 内部流量信息，提供波形图展示、流量概要展示、流量列表展示、流量筛选、流量详情，对流量信息统一拦截，成为我们 App 中自带的 &quot;Charles&quot;；</p> <p>【卡顿】 锁定 App 出现卡顿的时刻，打印出对应的代码调用堆栈；</p> <p>【大图检测】 通过流量监测，找出所有的大小超标的图片，避免下载大图造成的流量浪费和渲染大图带来的CPU消耗。</p> <p>【启动耗时】 无侵入的统计出App启动过程的总共耗时；</p> <p>【UI层级检查】 检查出每一个页面中层级最深的元素；</p> <p>【函数耗时】 从函数级别分析app性能瓶颈；</p> <p>【Load】 找出所有的Load方法，并给出耗时分析；（iOS独有）</p> <p>【内存泄漏】 找出App中所有的内存泄漏的问题。</p> <h3 id="四、视觉工具"><a href="#四、视觉工具" class="header-anchor">#</a> 四、视觉工具</h3> <p>【颜色吸管】 方便设计师 UI 捉虫的时候，查看每一个组件的颜色值是否设置正确；</p> <p>【组件检查】 可以抓取任意一个UI控件，查看它们的详细信息，包括控件名称、控件位置、背景色、字体颜色、字体大小；</p> <p>【对齐标尺】 参考 Android 系统自带测试工具，能够实时捕获屏幕坐标，并且可以查看组件是否对齐；</p> <p>【元素边框线】 绘制出每一个 UI 组件的边框，对于组件布局有一定的参考意义。</p> <h3 id="五、weex专项工具-cml专项工具"><a href="#五、weex专项工具-cml专项工具" class="header-anchor">#</a> 五、Weex专项工具（CML专项工具）</h3> <p>【console日志查看】 方便在端上查看每一个Weex文件中的console日志，提供分级和搜索功能；</p> <p>【storage缓存查看】 将Weex中的storage模块的本地缓存数据可视化展示；</p> <p>【容器信息】 查看每一个打开的Weex页面的基本信息和性能数据；</p> <p>【DevTool】 快速开启Weex DevTool的扫码入口。</p> <p>tips ： 如果使用我们滴滴优秀的开源跨端方案 chameleon 也可以集成该工具集合</p> <h3 id="六、支持自定义的业务工具集成到面板中"><a href="#六、支持自定义的业务工具集成到面板中" class="header-anchor">#</a> 六、支持自定义的业务工具集成到面板中</h3> <p>统一维护和管理所有的测试模块，详见接入手册</p> <h3 id="七、微信小程序专项工具"><a href="#七、微信小程序专项工具" class="header-anchor">#</a> 七、微信小程序专项工具</h3> <p>详见 Doraemon mini program debugger</p> <h2 id="可用在哪些平台"><a href="#可用在哪些平台" class="header-anchor">#</a> 可用在哪些平台？</h2> <p>iOS，Android，微信小程序。
<img src="http://p6-tt.byteimg.com/large/pgc-image/adcf146ff5bd4def84a5d03d01895fbb?from=pc" alt="adcf146ff5bd4def84a5d03d01895fbb.jpg"> <img src="http://p1-tt.byteimg.com/large/pgc-image/0afd404e601d4d9b80492c77989bde8a?from=pc" alt="adcf146ff5bd4def84a5d03d01895fbb.jpg"></p> <h2 id="开源项目地址"><a href="#开源项目地址" class="header-anchor">#</a> 开源项目地址：</h2> <p>https://github.com/didi/DoraemonKit</p></div></div></div> <div data-v-9fc62fe0><div class="article_copyright" data-v-089751b8 data-v-9fc62fe0><div class="article_footer" data-v-089751b8><div class="content" data-v-089751b8><blockquote data-v-089751b8><p data-v-089751b8>博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</p> <p data-v-089751b8>本文永久链接是：<a href="/2020/08/08/%E6%BB%B4%E6%BB%B4%E5%BC%80%E6%BA%90-doraemonkit%E6%9D%A5%E4%BA%86-%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E7%AE%B1/" style="display: block;" data-v-089751b8>/2020/08/08/%E6%BB%B4%E6%BB%B4%E5%BC%80%E6%BA%90-doraemonkit%E6%9D%A5%E4%BA%86-%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E7%AE%B1/</a></p></blockquote></div></div> <div class="new-meta-box" data-v-089751b8><div itemprop="dateUpdated" class="new-date" data-v-089751b8><a data-v-089751b8><i aria-hidden="true" class="fa fa-edit fa-fw" data-v-089751b8></i> <p data-v-089751b8>更新于：2020-08-08T22:35:59.000Z</p></a></div></div> <div class="prev-next" data-v-089751b8><a href="/2020/08/07/%E6%95%B4%E7%90%86%E4%B8%80%E4%B8%8B%E5%85%B3%E4%BA%8Ejq%E9%98%9F%E5%88%97%E5%92%8C%E5%9B%9E%E8%B0%83/" class="prev" data-v-089751b8><p class="title" data-v-089751b8><i aria-hidden="true" class="fa fa-chevron-left" data-v-089751b8></i>整理一下关于jq队列和回调</p></a> <a href="/2020/11/30/%E7%AE%80%E8%AE%BA%E5%BE%AE%E5%89%8D%E7%AB%AF%E7%9A%84%E6%84%8F%E4%B9%89%E4%B8%8E%E6%9C%AA%E6%9D%A5%E5%8F%91%E5%B1%95/" class="next" data-v-089751b8><p class="title" data-v-089751b8>简论微前端的意义与发展<i aria-hidden="true" class="fa fa-chevron-right" data-v-089751b8></i></p></a></div></div></div></div> <div class="article-comment" data-v-9fc62fe0><div class="comment" data-v-2ce08322 data-v-9fc62fe0><div class="post-list" data-v-2ce08322><div class="post-wrapper vcomment-div" data-v-2ce08322><em class="post-meta-item-text" data-v-2ce08322>阅读量 </em> <i class="leancloud-visitors-count" data-v-2ce08322>1000000</i> <div data-v-2ce08322></div></div></div></div></div></div></div></div> <div class="right-page" data-v-bb8ac3a0><div class="rightPage" data-v-1be37983 data-v-bb8ac3a0><div class="computer" data-v-1be37983 data-v-1be37983><div class="content paperMenu" style="transition:0s;" data-v-1be37983><div class="social-wrapper paper-navigation" data-v-1be37983><div data-v-1be37983><i class="fas fa-folder-open fa-fw" data-v-1be37983></i> <span data-v-1be37983>文章导航</span></div> <div class="navigationContent" data-v-1be37983><div data-v-1be37983><!----> <h2 class="paperlevel" data-v-1be37983><a id="doraemonkit-dɔ-ra-emɔn-简称dokit-中文名-哆啦a梦-意味着能够像哆啦a梦一样提供给他的主人各种各样的工具。just-do-kit。" data-v-1be37983></a>DoraemonKit /'dɔ:ra:'emɔn/，简称DoKit，中文名 哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just Do Kit。
                            </h2> <!----> <!----> <!----> <!----></div><div data-v-1be37983><!----> <h2 class="paperlevel" data-v-1be37983><a id="doraemonkit是什么" data-v-1be37983></a>DoraemonKit是什么？
                            </h2> <!----> <!----> <!----> <!----></div><div data-v-1be37983><!----> <h2 class="paperlevel" data-v-1be37983><a id="doraemonkit有什么特色" data-v-1be37983></a>DoraemonKit有什么特色？
                            </h2> <!----> <!----> <!----> <!----></div><div data-v-1be37983><!----> <h2 class="paperlevel" data-v-1be37983><a id="你可用的模块有哪些" data-v-1be37983></a>你可用的模块有哪些？
                            </h2> <!----> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="一、平台工具-www-dokit-cn" data-v-1be37983></a>一、平台工具(www.dokit.cn)
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="二、常用工具" data-v-1be37983></a>二、常用工具
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="三、性能检测" data-v-1be37983></a>三、性能检测
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="四、视觉工具" data-v-1be37983></a>四、视觉工具
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="五、weex专项工具-cml专项工具" data-v-1be37983></a>五、Weex专项工具（CML专项工具）
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="六、支持自定义的业务工具集成到面板中" data-v-1be37983></a>六、支持自定义的业务工具集成到面板中
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <!----> <h3 class="paperlevel" data-v-1be37983><a id="七、微信小程序专项工具" data-v-1be37983></a>七、微信小程序专项工具
                            </h3> <!----> <!----> <!----></div><div data-v-1be37983><!----> <h2 class="paperlevel" data-v-1be37983><a id="可用在哪些平台" data-v-1be37983></a>可用在哪些平台？
                            </h2> <!----> <!----> <!----> <!----></div><div data-v-1be37983><!----> <h2 class="paperlevel" data-v-1be37983><a id="开源项目地址" data-v-1be37983></a>开源项目地址：
                            </h2> <!----> <!----> <!----> <!----></div></div></div></div> <div class="content" data-v-1be37983><div class="head" data-v-1be37983><a href="/aboutPage/" class="avatar flat-box rectangle" data-v-1be37983><img src="https://blog.jingzhe.xyz/jingzhe/jpg/1593256062295.jpeg" data-v-1be37983></a> <p data-v-1be37983><span data-v-1be37983>微雨众卉新，一雷惊蛰始。</span></p></div> <div class="social-wrapper" data-v-1be37983><span data-v-1be37983><a href="" rel="external nofollow noopener noreferrer" target="_blank" class="social fab fa-github flat-btn" data-v-1be37983></a></span> <span data-v-1be37983><a href="mailto: 12363078673@qq.com" rel="external nofollow noopener noreferrer" target="_blank" class="social fas fa-envelope flat-btn" data-v-1be37983></a></span> <span data-v-1be37983><a href="https://blog.csdn.net/u013605060" rel="external nofollow noopener noreferrer" target="_blank" class="social fas fa-code flat-btn" data-v-1be37983></a></span> <span data-v-1be37983><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1263078673&amp;site=qq&amp;menu=yes" rel="external nofollow noopener noreferrer" target="_blank" class="social fa fa-qq flat-btn" data-v-1be37983></a></span></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-folder-open fa-fw" data-v-1be37983></i> <span data-v-1be37983>文章分类</span></div> <div data-v-1be37983><ul class="entry navigation" data-v-1be37983><li data-v-1be37983><a href="/categories/笔记/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>笔记</div> <div class="badge" data-v-1be37983>(14)</div></a></li><li data-v-1be37983><a href="/categories/作品集/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>作品集</div> <div class="badge" data-v-1be37983>(1)</div></a></li><li data-v-1be37983><a href="/categories/随笔/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>随笔</div> <div class="badge" data-v-1be37983>(1)</div></a></li><li data-v-1be37983><a href="/categories/喵喵/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>喵喵</div> <div class="badge" data-v-1be37983>(2)</div></a></li><li data-v-1be37983><a href="/categories/创作集/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>创作集</div> <div class="badge" data-v-1be37983>(1)</div></a></li></ul></div></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-tags fa-fw" data-v-1be37983></i> <span data-v-1be37983>热门标签</span></div> <div class="word-cloud" data-v-1be37983><a href="/tags/jenkins/" style="font-size:15px;" data-v-1be37983>jenkins</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/vue/" style="font-size:18px;" data-v-1be37983>vue</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/JS/" style="font-size:24px;" data-v-1be37983>JS</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/JAVA/" style="font-size:15px;" data-v-1be37983>JAVA</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/Trilateration/" style="font-size:15px;" data-v-1be37983>Trilateration</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/Google/" style="font-size:15px;" data-v-1be37983>Google</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/pjax/" style="font-size:15px;" data-v-1be37983>pjax</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E7%94%B5%E5%BD%B1/" style="font-size:15px;" data-v-1be37983>电影</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E5%85%AB%E4%BD%B0/" style="font-size:15px;" data-v-1be37983>八佰</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size:18px;" data-v-1be37983>前端</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/css/" style="font-size:18px;" data-v-1be37983>css</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/docker/" style="font-size:15px;" data-v-1be37983>docker</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/nginx/" style="font-size:18px;" data-v-1be37983>nginx</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/rtmp/" style="font-size:15px;" data-v-1be37983>rtmp</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/ffmpeg/" style="font-size:18px;" data-v-1be37983>ffmpeg</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/element-ui/" style="font-size:15px;" data-v-1be37983>element-ui</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/nodejs/" style="font-size:15px;" data-v-1be37983>nodejs</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/shake/" style="font-size:15px;" data-v-1be37983>shake</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/DoraemonKit/" style="font-size:15px;" data-v-1be37983>DoraemonKit</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E6%BB%B4%E6%BB%B4/" style="font-size:15px;" data-v-1be37983>滴滴</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/BIO/NIO/AIO/" style="font-size:15px;" data-v-1be37983>BIO/NIO/AIO</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E6%8F%92%E4%BB%B6/" style="font-size:15px;" data-v-1be37983>插件</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/HTTP/HTTPS/" style="font-size:15px;" data-v-1be37983>HTTP/HTTPS</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/TCPIP/" style="font-size:15px;" data-v-1be37983>TCPIP</a></div></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-bullhorn fa-fw" data-v-1be37983></i> <span data-v-1be37983>公告</span></div> <div data-v-1be37983>
                        本站使用VuePress创建全站，还在不断完善中
                    </div></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-award fa-fw" data-v-1be37983></i> <span data-v-1be37983>站点信息</span></div> <div class="webinfo" data-v-1be37983><div class="webinfo-item" data-v-1be37983><div data-v-1be37983>文章数目：</div> <div data-v-1be37983>58 篇</div></div> <div class="webinfo-item" data-v-1be37983><div data-v-1be37983>已运行时间：</div> <div id="webinfo-runtime-count" data-v-1be37983>162 天</div></div> <div class="webinfo-item" data-v-1be37983><div data-v-1be37983>更新时间时间：</div> <div id="webinfo-runtime-count" data-v-1be37983>3 天前更新</div></div></div></div></div></div></div></div></div></div></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8e64649f.js" defer></script><script src="/assets/js/17.9b1a1e45.js" defer></script><script src="/assets/js/4.84c4889c.js" defer></script><script src="/assets/js/35.88a27070.js" defer></script>
<!-- 加入音乐-->
<div style="max-width: 750px;margin: 0 auto;padding: 40px;display: none;" id="meetingJs">
    <meting-js server="netease" type="playlist" id="567087780" list-max-height=150px></meting-js>
</div>
<!--全屏遮挡-->
<div class="fullScreen" style=""></div>

<canvas width="1413" height="968"
        style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<!--鼠标特效-->
<script src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/mouse_click.js"></script>
<script>
    // 写一个简单的pjax，适配于vuepress
    $(function () {
        function pjax(href, type) {
            //为了seo的优化，不支持方法直接跳转
            if (!history.pushState) {
                window.location.href = href;
            }
            let newHref = href;
            $.ajax({
                url: newHref, success: function (result) {
                    let resultObj = $(result);
                    //获取标题
                    let newTitle = resultObj.filter("title").text();
                    //循环Script标签，重新加载拥有defer的
                    $("script[defer]").remove();
                    $(result).filter('script[defer]').each(function () {
                        $("body").append(this.outerHTML);
                    })
                    $("#main-body-pjax").after("<div style='display: none;' id='main-body-pjax-other' class='"+$("#main-body-pjax").attr('class')+"'></div>");
                    $("#main-body-pjax-other")[0].innerHTML = resultObj.find("div[id=main-body-pjax]").innerHTML;
                    let state = ({
                        url: newHref, title: newTitle
                    });
                    if (type === 1) {
                        window.history.pushState(state, newTitle, newHref);
                    }
                    document.title = newTitle
                    //滚回顶部
                    // $('html, body').animate({scrollTop: 0}, 'slow');
                    //背景再次被重置
                    if (window.localStorage.getItem('cutoverColor') === "false") {
                        $(".fullScreen").css("background","#000")
                    }
                }
            });
        }

        // 手写一个简易版本的pjax，适用于vuepress
        $('body').on('click', 'a', function (e) {
            e.preventDefault();
            if (typeof $(this).attr("href") != "undefined") {
                pjax($(this).attr("href"), 1);
            }
        })
        window.addEventListener('popstate', function (evt) {
            let oldHref = evt.state.url;
            pjax(oldHref, 0);
        }, false);
    })


    window.onload = function () {
        //防止哔哔哔模块不显示
        bbtalk.init({
            appId: "gbNUwY2ePs3khwpWCJvSNMC5-MdYXbMMI",
            appKey: "ObQ0ANDmaRwvTREmMpzN4WNv",
            serverURLs: 'https://gbnuwy2e.api.lncldglobal.com'
        })
        //音乐模块显示
        $("#meetingJs").show();
        //背景切换图
        $.backstretch(
            ["https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg",
                "https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg",
                "https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg",
                "https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg",
                "https://api.mtyqx.cn/api/random.php",
            ], {
                fade: 750, duration: 4000, speed: 500
            }
        );
        //头部，返回到顶部展示，右侧菜单的展示规则
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        headShow(t);
        backTopShow(t);
        rightPageMenuShow(t);
        //事件委托 (触发跳转)文章导航
        try {
            $("body").on('click', '.navigationContent', function (event) {
                let id = event.target.getElementsByTagName('a')[0].id;
                scroll(0, document.getElementById(id).offsetTop - 85);
            })
        } catch (e) {
        }
    }

    //移动滚动条
    function scroll(currentY, targetY) {
        // 计算需要移动的距离
        let needScrollTop = targetY - currentY
        let _currentY = currentY
        setTimeout(() => {
            // 一次调用滑动帧数，每次调用会不一样
            const dist = Math.ceil(needScrollTop / 10)
            _currentY += dist
            window.scrollTo(_currentY, currentY)
            // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
            if (needScrollTop > 10 || needScrollTop < -10) {
                scroll(_currentY, targetY)
            } else {
                window.scrollTo(_currentY, targetY)
            }
        }, 1)
    }

    /*监听滚动条，显示或者隐藏某些元素（右侧文章锚点和头部）*/
    window.onscroll = function () {
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        headShow(t);
        backTopShow(t);
        rightPageMenuShow(t);
    }

    function headShow(t) {
        let container = document.querySelector('.container');//container 显示
        let height = (document.querySelector('.homeCover').offsetHeight) -
            (document.querySelector('.container').style.height);
        container.style.display = (t >= (height - 50)) ? "block" : "none";
    }

    function backTopShow(t) {
        try {
            let backTop = document.querySelector('.footer-up');//footer-up 显示
            backTop.style.display = (t >= 30) ? "block" : "none";
        } catch (e) {
        }
    }

    function rightPageMenuShow(t) {
        try {
            let rightPageMenu = document.querySelector('.paperMenu');//footer-up 显示
            rightPageMenu.className = (t >= 10) ? "content paperMenu suspension" : "content paperMenu";
        } catch (e) {
        }
    }


</script>


<script>
    //暗黑模式
    let cutoverColor = false;
    $(function () {
        if (window.localStorage.getItem('cutoverColor') === "false") {
            //线程独占
            setTimeout(function () {
                darkMode();
            }, 0);
        }
        $("body").on('click', '.cutover', function () {
            darkMode();
        })
    })

    function darkMode() {
        cutoverColor = !cutoverColor;
        window.localStorage.setItem('cutoverColor', !cutoverColor);
        if (cutoverColor) {
            document.documentElement.style.setProperty('--main', '#515a6e');
            document.documentElement.style.setProperty('--mainfont', '#fff');
            document.documentElement.style.setProperty('--headfont', '#fff');
            document.documentElement.style.setProperty('--color-list', '#fff');
            document.documentElement.style.setProperty('--color-tag', '#fff');
            $(".fullScreen").css("background","#000");
        } else {
            document.documentElement.style.setProperty('--main', '#ffff');
            document.documentElement.style.setProperty('--mainfont', '#515a6e');
            document.documentElement.style.setProperty('--headfont', '#2c3e50');
            document.documentElement.style.setProperty('--color-list', '#666');
            document.documentElement.style.setProperty('--color-tag', '#999');
            $(".fullScreen").css("background","");
        }
    }
</script>

<style>
    a {
        text-decoration: none
    }

    body {
        margin: 0 auto;
    }backstretch-item

    .fullScreen {
        left: 0px;
        top: 0px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100vw;
        z-index: -999998;
        position: fixed;
    }
</style>
</body>
</html>
